<template>
  <div>
    <el-popover placement="right" :width="300" trigger="click" @show="initShow" @hide="hideFunc">
      <template #reference>
        <slot name="clickDom"></slot>
      </template>
      <div class="rapidReport" ref="rapidReportRef" v-loading="loading" :element-loading-spinner="svg"
        element-loading-text="加载中..." element-loading-svg-view-box="0, 0, 50, 50">
        <el-scrollbar>
          <el-row ref="rowRef" v-loading="loading">
            <el-col v-for="item in dataList" :key="item.cataId" v-if="dataList.length > 0">
              <el-link :underline="false" @click="openPreview(item)">
                <div class="data-list">
                  <el-icon>
                    <DArrowRight />
                  </el-icon>
                  <span>{{ item.location }}（{{ item.longitude }}，{{ item.latitude }}）</span>
                  <div class="data-list-detail">
                    {{ item.earthquakeDate }}
                    发生{{ item.mm }}级地震
                  </div>
                </div>
              </el-link>
            </el-col>
            <el-col v-if="dataList===true">
              <span style="text-align: center">暂无数据</span>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </el-popover>

    <ResultPreview v-model:open="resultPreviewOpen" :title="title" :data="curItem" :type="type" />
  </div>
</template>
<script setup>
import ResultPreview from '@/views/quickMapping/common/manualMapping/resultPreview'
import { getRapid } from '@/api/quickMapping/quickMapping/index'

const props = defineProps({
  type: String,
  title: String
})
const { proxy } = getCurrentInstance()

const dataList = ref([])
const loading = ref(false)
const svg = `
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="var(--el-color-primary)" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg>
      `

const resultPreviewOpen = ref(false)
const curItem = ref({})
const openPreview = (item) => {
  proxy.$modal.confirm('是否对该条速报信息进行制图？').then(() => {
    resultPreviewOpen.value = true
    curItem.value = item
    return item
  }).catch(() => { })
}

const initShow = () => {
  loading.value = true
  getRapid().then(res => {
    loading.value = false
    if (res.data?.length > 0) {
      dataList.value = res.data
      nextTick(() => {
        if (proxy.$refs.rowRef.$el.clientHeight > 380) {
          proxy.$refs.rapidReportRef.style.height = '380px'
        }
      })
    }else{
      dataList.value = true
    }
  })
}
const hideFunc = () => {
  dataList.value = []
}
</script>
<style lang="scss" scoped>
.primary-btn-icon {
  :deep(.el-icon) {
    color: var(--el-color-primary);
    transform: scale(1.5);
  }
}

.rapidReport {
  // max-width: 300px;
  height: 150px;

  .el-row {

    .el-col {
      padding: 10px 0;
      word-wrap: break-word;
      word-break: break-all;

      .el-link {
        font-size: 1em;

        .data-list {
          .el-icon {
            margin-right: 5px;
          }

          .el-icon,
          span {
            vertical-align: middle;
          }

          &-detail {
            padding: 5px 0;
          }
        }
      }
    }
  }
}
</style>